<template>
  <div class="result">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:5;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoNav()"><a><em class="before"></em><span>预算管理</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:4;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/nav3')"><a><em class="before"></em><span>预算编制</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:3;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/nav1')"><a><em class="before"></em><span>制定目标(2021)</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:2;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/nav7')"><a><em class="before"></em><span>预算执行</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:1;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/nav6/月/执行结果')"><a><em class="before"></em><span>执行结果</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:0;background-color: #ffc107;"><a><em class="before"></em><span style="color: #4e555b;">{{typeName}}</span><i style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="mt-4 table">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="project"
            label="项目"
            width="180">
          </el-table-column>
          <el-table-column
            prop="month1"
            :label="index + '月'"
            v-for="index of thisMonth"
            :key="index">
            <template slot-scope="scope">
              {{scope.row['month'+index+'Amount'] === '' ? 0 : scope.row['month'+index+'Amount']}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'result',
    data () {
      return {
        typeName: '',
        tableData: [],
        type: '',
        thisMonth: 1
      }
    },
    created() {
      this.thisMonth = new Date().getMonth() + 1
      this.typeName = this.$route.params.type
      this.type = this.$route.params.type2
      this.getResultDetail()
    },
    methods: {
      gotoHome(){
        this.$router.push("/index");
      },
      //跳转到书吧
      gotoNav: function(){
        this.$router.push("/nav2");
      },
      gotoNav3: function(){
        this.$router.push("/nav3");
      },
      getResultDetail() {
        this.$http.get(
          '/api/getResult',
          {
            params:{
              type: this.type
            }
          }).then(res => {
          this.tableData = res.data
        })
      }
    }
  }
</script>

<style scoped>
  tr{
    text-align: center;
  }
  .result {
    height: 180%;
  }
  .result .table{
    border: 1px solid #cbd3da;
  }



</style>
